<template>
  <div class="register-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="register-form">
      <el-form-item label="账号" prop="account">
        <el-input v-model="form.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="证件号码" prop="idCard">
        <el-input v-model="form.idCard"></el-input>
      </el-form-item>
      <el-form-item label="联系地址" prop="address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verificationCode">
        <div class="captcha-container">
          <el-input v-model="form.verificationCode" placeholder="请输入验证码"></el-input>
          <span class="login-code" @click="refreshCode">
            <dentify :identifyCode="identifyCode"></dentify>
          </span>
        </div>
      </el-form-item>
      <el-form-item class="button-group">
        <el-button type="primary" @click="submitForm('form')">注册</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
import dentify from "@/components/Dentify";
export default {
  components: {
    dentify
  },
  data() {
    return {
      form: {
        account: "",
        password: "",
        name: "",
        phone: "",
        idCard: "",
        address: "",
        verificationCode: ""
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "账号长度在 3 到 15 个字符",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度不能少于 6 个字符", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入有效的手机号码",
            trigger: "blur"
          }
        ],
        idCard: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/,
            message: "请输入有效的证件号码",
            trigger: "blur"
          }
        ],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" }
        ],
        verificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入验证码"));
              } else if (value !== this.identifyCode) {
                callback(new Error("验证码不正确"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: ""
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .post("tenant/reg", this.form)
            .then(res => {
              if (res.data.code === 200) {
                this.$message.success("注册成功");
                this.$store.commit("setIsRegistered", true);
                this.$store.commit("setRegisterTenant", this.form);
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch(err => {
              this.$message.error(err.message);
            });
        } else {
          this.$message.warning("表单验证不通过");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
  }
};
</script>
  
  <style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-form {
  width: 400px;
  padding: 20px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.captcha-container {
  display: flex;
}

.captcha-container .el-input {
  flex: 1;
}

.login-code {
  width: 100px; /* 调整验证码宽度 */
  height: 35px;
  margin-left: 10px;
  border-radius: 5px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: normal;
  margin-top: 4px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-left: -100px;
}
</style>
  